﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }
    @{ await Html.RenderPartialAsync("/Views/Shared/_StyleCss.cshtml"); }

    <link href="/css/DayOuput.css?v=@DateTime.Now.Ticks" rel="stylesheet" />
    <title>DayOuput</title>
    <style type="text/css">
        .notice {
            width: 100%;
            height: 0.15rem;
            font-size: 0.16rem;
            padding-left: 0.3rem;
        }

        .notice-container {
            /*background: #FFFFFF;*/
            font-size: 0.15rem;
            color: #3E4759;
            height: 0.3rem;
            overflow: hidden;
            box-sizing: border-box;
            width: calc(100% - 0.3rem);
            display: flex;
            align-items: center;
        }

        .notice-icon {
            display: block;
            /*margin-left: 10px;*/
            flex-shrink: 0;
            width: 0.3rem;
            height: 0.3rem;
            background: url("/images/ProcessCapacity/公告.png") no-repeat;
            background-size: 100% 100%;
        }

        .msli {
            /*text-align: center;*/
            list-style: none;
            margin: 0;
            padding: 0px;
        }

        .msli > li {
            font-size: 0.18rem;
            font-weight: bold;
            /*padding: 5px;*/
        }
    </style>
    <style type="text/css">
        .modaltabcontent {
            display: none;
            padding: 0.1rem 0.2rem;
            border-top: none;
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 2rem;
        }

        .tab > span:hover {
            background-color: #384e61;
        }

        .legend {
            display: flex;
            justify-content: center;
            margin-bottom: 0.2rem;
        }

        .legend > span {
            padding: 1px;
            text-align: center;
            /*border-radius: 1pc;*/
            font-size: 0.12rem;
            width: 0.6rem;
            margin: 0 0.1rem;
        }

        #Tab-Item {
            width: calc(100% - 0rem);
            padding-left: 0.1rem;
            padding-right: 0.3rem;
        }

        .tablinks {
            display: inline-block;
        }

        #devicecontent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 100%;
            height: calc(100% - 0.25rem);
            /*margin-bottom: 0.1rem;*/
            /* justify-content: center;*/
            /*滚动条*/
            /* overflow: auto;*/
        }

        .devic {
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-radius: 50%;
            color: white;
            font-size: 0.1rem;
            line-height: 0.2rem;
            margin-bottom: 0.5vh;
            position: relative;
            /*呼吸灯*/
            /*animation: devic 3s ease-in-out infinite;*/
            animation: devic 1s linear infinite;
        }

        .devic::before,
        .devic::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            animation: inherit;
            animation-delay: 1s;
        }

        .devic::after {
            animation-delay: 2s;
        }

        @@keyframes devic {
            0% {
                box-shadow: 0 0 0 0.03rem var(--ripple-color);
            }

            100% {
                box-shadow: 0 0 0 0.06rem rgba(255,255,255, 0);
            }
        }

        .divfolt {
            margin: 0 0.12rem;
            padding: 0.1rem 0;
            width: 10%;
            height: 0.62rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .divfolt:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .divfolt p {
            font-size: 0.1rem;
            margin: 0.02rem;
        }

        .circle {
            display: inline-block;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 50%;
            margin-right: 0.2vw;
            /*根据父元素垂直居中*/
            vertical-align: middle;
        }

        .await {
            background-color: rgba(38, 154, 188, 1);
        }

        .inidle {
            background-color: rgba(246, 139, 167, 1);
        }

        .breakdown {
            background-color: rgba(172, 41, 37, 1);
        }

        .debug, .unproduced {
            background-color: rgba(213, 133, 18, 1);
        }

        .normal {
            background-color: rgba(57, 132, 57, 1);
        }

        .devicedetailt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: none;
            width: 85%;
            height: 2.5rem;
            text-align: center;
            padding: 0.12rem;
            background-color: #fff;
            border-radius: 0.1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 0.1rem;
            border: 1px solid wheat;
            border-radius: 0.1rem;
            color: black;
            font-size: 0.15rem;
        }
    </style>
</head>
<body class="fill-parent" style="overflow-y: hidden">
    <div class="main">
        <div class="header">
            <div class="header-left fl">
                <img src="/images/logo.png?v=@DateTime.Now.Ticks" class="scaled-image" draggable="false" oncontextmenu="return false;" ondragstart="return false;" />
            </div>
            <div class="quer">
                <spn>
                    <div id="query">
                        <select id="cmb_classtype">
                            <option value="OTD">@Label.OTD</option>
                            <option value="YTD">@Label.YTD</option>
                        </select>
                        <select id="cmb_prod_type" name="ProdType" placeholder="select prodtype">
                            <option value="ALL">@Label.ALL</option>
                            <option value="Normal">@Label.Fresh</option>
                            <option value="Rework">@Label.Rework</option>
                        </select>
                        <select id="cmb_proj_code">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_product_code">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                        <select id="cmb_process_code">
                            <option value="">@Label.PleaseSelect</option>
                        </select>
                    </div>
                </spn>
            </div>

            <div class="btn">
                <spn>
                    <div id="query">
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Desktop</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard.exe?v={DateTime.Now.Ticks}") download>@Label.Local</a>
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard_lnk.zip?v={DateTime.Now.Ticks}") download>@Label.Shortcut</a>
                            </div>
                        </div>
                        <button class="modalBtn" onclick="ProductionDataExport('Production')">@Label.Data@Label.Export</button>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Target</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="ModalShow('Pro_Output_Target')">@Label.Process@Label.Target</a>
                                <a class="menudropdown" onclick="ModalShow('Emp_Output_target')">@Label.People@Label.Target</a>
                                <a class="menudropdown" onclick="ModalShow('PublicMsg')">@Label.Notice@Label.Publish</a>
                                @*<a onclick="ModalShow('EmailWarning')">预警任务</a>*@
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Equipment@Label.Message</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="ModalShow('Binding_Equipment')">@Label.Import@Label.Export</a>
                                <a class="menudropdown" onclick="Openforms('Binding_Add')">@Label.Add@Label.Update</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Tests@Label.Item</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="ModalShow('Binding_Test_Item')">@Label.Bind@Label.Tests@Label.Item</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Language</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.CNLANGUAGE')">@Label.Chinese</a>
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.USLANGUAGE')">@Label.English</a>
                            </div>
                        </div>
                        <button class="modalBtn dimension">@Label.Full</button>
                    </div>
                </spn>
            </div>
            <div class="header-center fl">
                <div class="header-title"></div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl" id="time"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="notice">
            <div class="notice-container">
                <span class="notice-icon"></span>
                <div style="position: relative; height: 0.22rem; overflow: hidden;">
                    <ul class="msli">
                    </ul>
                </div>
            </div>

        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'left-top','Tab1',GetToDay)">@Html.Raw(Label.Process+Label.Hour+Label.Total+Label.Output)</button>
                    </div>
                    <div id="Tab1" class="tabcontent"></div>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="tab">
                        <button class="timerate tablinks active" onclick="OpenTab(event,'left-bottom','Tab2',GetUtilizationRate)">@Html.Raw(Label.Equipment + Label.Time + Label.Utilization)</button>
                        <button class="soe tablinks" onclick="OpenTab(event,'left-bottom','Tab2',GetProcessEquipment)">@Html.Raw(Label.Current + Label.Equipment + Label.Status)</button>
                    </div>
                    <div id="Tab2" class="tabcontent" style="position: relative;"></div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'right-top','Tab3',GetToDayOperatorYield)">@Html.Raw(Label.OTD + Label.People+Label.Output)</button>
                        <button class="tablinks" onclick="OpenTab(event,'right-top','Tab3',GetFisToDayMachine)">@Html.Raw(Label.OTD + Label.Equipment + Label.Output)</button>
                        <button class="tablinks" onclick="OpenTab(event,'right-top','Tab3',GetRetest)">@Html.Raw(Label.OTD + Label.Retest+Label.Data)</button>
                    </div>
                    <div id="Tab3" class="tabcontent"></div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="tab">
                        <div id="Tab-Item" style="position: absolute;">
                            <div id="scrollContainer" class="scroll-container" style="overflow-x: auto;scrollbar-width: none;">
                                <ul id="listContainer" class="scroll-content" style="white-space: nowrap;"></ul>
                            </div>
                        </div>
                    </div>
                    <div id="Tab4" class="tabcontent"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -文件下载上传 -->
    <div class="modal">
        <div class="modal-content family">
            <span class="close" onclick="ModalClose('modal')">×</span>
            <p id="Item" class="modal-title">@Html.Raw(Label.Settings+Label.Output+Label.Target)</p>
            <br>
            <div class="form-flex">
                <label for="projcode">projcode:</label>
                <select id="projcode" name="projcode" placeholder="select projcode"></select>
                <label for="product">product:</label>
                <select id="product" name="product" placeholder="select projcode"></select>
                <label for="process">process:</label>
                <select id="process" name="process" placeholder="select process"></select>
                <label>
                    <span><label><button type="submit" style="background-color: #49c5ce;" onclick="ExportToExcel()"><span><img src="/images/ProcessCapacity/Excel.ico" alt="Excel" class="icon"></span>生成Excel模板</button></label></span>
                    <span id="export"></span>
                </label>
                <span>
                    <label>@Html.Raw(Label.Import+Label.Template):</label>&nbsp;
                    <span><input type="file" id="Template" name="Template" style="width:calc(100% - 0.78rem)" placeholder="Enter your Process"></span>
                </span>
                <label for="message">message:</label>
                <input type="text" id="message" name="message" placeholder="Enter your message">
                <button type="submit" style="font-weight: bold; height:0.5rem;" onclick="UploadExcel()">Submit</button>
            </div>
        </div>
    </div>
    <!-- 模态框 -公告信息列表 -->
    <div class="modal-msg">
        <div class="modal-list family">
            <span class="close" onclick="ModalClose('modal-msg')">×</span>
            <p class="modal-title">@Html.Raw(Label.Notice+Label.Publish)！</p>
            <br>
            <div class="form-flex">
                <table id="tablelist" class="modaltable">
                    <thead>
                        <tr>
                            <th>@Html.Raw(Label.NoSort)</th>
                            <th>@Html.Raw(Label.Title)</th>
                            <th>@Html.Raw(Label.Content)</th>
                            <th>@Html.Raw(Label.Status)</th>
                            <th>@Html.Raw(Label.Operate)</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div id="pagination">
                    <button id="prevPage">@Html.Raw(Label.PageUp)</button>
                    <span id="currentPage">1</span>
                    <button id="nextPage">@Html.Raw(Label.NextPage)</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 --公告信息添加修改 -->
    <div class="modal-msg-add-up">
        <div class="modal-content family">
            <span class="close" onclick="ModalClose('modal-msg-add-up')">×</span>
            <p id="Item-msg" class="modal-title">@Html.Raw(Label.Notice+Label.Message)</p>
            <br>
            <div class="form-flex">
                <label for="title">@Html.Raw(Label.Title):</label>
                <input type="text" id="title" name="title" placeholder="Enter your title">
                <label for="message">@Html.Raw(Label.Content):</label>
                <input type="text" id="msg-message" name="message" placeholder="Enter your message">
                <label for="status">@Html.Raw(Label.Status):</label>
                <span>
                    <label><button id="enable">@Html.Raw(Label.Enable)</button></label>&nbsp;
                    <span><input type="radio" name="status" value="true" checked="true"></span>&nbsp;&nbsp;
                    <label><button id="disable">@Html.Raw(Label.Forbidden)</button></label>&nbsp;
                    <span><input type="radio" name="status" value="false"></span>
                </span>
                <button type="submit" style="font-weight: bold; height:0.5rem;" onclick="Msgaddorup()">Submit</button>
            </div>
        </div>
    </div>
    <!-- 模态框 --邮件预警配置 -->
    <div class="modal-emawarg">
        <div class="modal-list family">
            <span class="close" onclick="ModalClose('modal-emawarg')">×</span>
            <p class="modal-title">邮件预警配置</p>
            <br>
            <div style="border: 1px #729ea5 solid ">
                <div class="tab">
                    <button class="btntab active" onclick="SwitchTab(event,'Modal_Tab1')">预警任务列表</button>
                    <button class="btntab" onclick="SwitchTab(event,'Modal_Tab2')">创建预警任务</button>
                </div>
                <!-- 模态框 --邮件预警配置 列表 -->
                <div id="Modal_Tab1" class="modaltabcontent" style="display:block;">
                    <div class="form-flex">
                        <table id="EmaWarglist" class="modaltable" style="font-size:0.10rem;">
                            <thead>
                                <tr>
                                    <th>ID序号</th>
                                    <th>标题</th>
                                    <th>信息内容</th>
                                    <th>触发模式</th>
                                    <th>任务状态</th>
                                    <th>收件人</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div id="pagination">
                            <button id="ewprevPage">上一页</button>
                            <span id="ewcurrentPage">1</span>
                            <button id="ewnextPage">下一页</button>
                        </div>
                    </div>

                </div>
                <!-- 模态框 --邮件预警配置 创建or修改 -->
                <div id="Modal_Tab2" class="modaltabcontent">
                    <div class="form-flex">
                        <label for="title">标题:</label>
                        <input type="text" id="em-title" name="em-title" placeholder="Enter your title">
                        <label for="message">信息内容:</label>
                        <textarea id="em-message" name="message" placeholder="Enter your message" rows="3" style="height: 0.7rem; resize: none;"></textarea>
                        <label for="echarts">echarts图表</label>
                        <select id="echarts" name="echarts">
                            <option value="工序累计产出">工序累计产出</option>
                            <option value="员工产出&良率">员工产出&良率</option>
                            <option value="机台产出&良率">机台产出&良率</option>
                        </select>
                        <label for="syntype">触发模式</label>
                        <select id="syntype" name="syntype">
                            <option value="1">1/小时</option>
                            <option value="2">2/小时</option>
                            <option value="3">3/小时</option>
                            <option value="3">4/小时</option>
                        </select>
                        <label for="status">任务状态:</label>
                        <span>
                            <label><button id="enable">运行</button></label>&nbsp;
                            <span><input type="radio" name="taskstate" value="true" checked="true"></span>&nbsp;&nbsp;
                            <label><button id="disable">停止</button></label>&nbsp;
                            <span><input type="radio" name="taskstate" value="false"></span>
                        </span>
                        <label for="status">条件配置</label>
                        <table id="wheretable" class="modaltable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" name="vehicle" value="Car"></th>
                                    <th>参数</th>
                                    <th>条件</th>
                                    <th>设置值</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyconfig"></tbody>
                        </table>
                        <label for="email">收件人</label>
                        <div style="display: flex; align-items: center;">
                            <img src="/images/search.png" alt="Excel" onclick="ModalShow('Recipient')" class="icon">
                            <textarea id="email" name="email" placeholder="Enter your email" rows="3" style="height: 0.7rem; width: calc(100% - 0.5rem); resize: none;" oninput="updateValue()"></textarea>
                        </div>
                        <button type="submit" style="font-weight: bold; height:0.5rem;" onclick="Createmailtask()">Submit</button>
                    </div>

                </div>
            </div>
            <script>
                //email_Tab
                function SwitchTab(evt, tabName) {
                    var i, tabcontent, btntab;
                    tabcontent = document.getElementsByClassName("modaltabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                        tabcontent[i].style.display = "none";
                    }
                    btntab = document.getElementsByClassName("btntab");
                    for (i = 0; i < btntab.length; i++) {
                        btntab[i].className = btntab[i].className.replace(" active", "");
                    }
                    document.getElementById(tabName).style.display = "block";
                    evt.currentTarget.className += " active";
                }
                //email_list
                var currentPage = 1;
                var itemsPerPage = 5;
                function Emaillist(Page) {
                    var tableHTML = "";
                    var pam = {
                        page: currentPage,
                        itemsPerPage: itemsPerPage
                    };
                    $.ajax({
                        url: api + '/Dashboard/GetMailTaskList?' + $.param(pam),
                        type: 'POST',
                        dataType: "json",
                        success: function (data) {
                            tableHTML = "";
                            if (data.ReturnData.length != itemsPerPage) {
                                $("#ewnextPage").prop("disabled", true).css("background-color", "gray");
                            }
                            else {
                                $("#ewnextPage").prop("disabled", false).css("background-color", "#07a3fd");
                            }
                            for (var i = 0; i < data.ReturnData.length; i++) {
                                var status = parseInt(data.ReturnData[i].STATUS) > 1 ? "运行中" : "停止中";
                                var ststyle = parseInt(data.ReturnData[i].STATUS) > 1 ? "enable" : "disable";
                                tableHTML += '<tr>';
                                tableHTML += '<td>' + data.ReturnData[i].WARNING_ID + '</td>';
                                tableHTML += '<td>' + data.ReturnData[i].TITLE + '</td>';
                                tableHTML += '<td>' + data.ReturnData[i].MESSAGE + '</td>';
                                tableHTML += '<td>' + data.ReturnData[i].SYNT_YPE + '</td>';
                                tableHTML += '<td><button id="' + ststyle + '">' + status + '</button></td>';
                                tableHTML += '<td>' + Object.keys(JSON.parse(data.ReturnData[i].EMAIL_ADDRESS)).toString() + '</td>';
                                tableHTML += '<td><button id="btn_upadte" onclick="msgaddorupt(\'update\',' + data.ReturnData[i].WARNING_ID + ')">编辑</button></td>';
                                tableHTML += '</tr>';
                            }
                            $("#EmaWarglist>tbody").html(tableHTML);
                            $("#ewcurrentPage").text(Page);
                        }
                    });
                }
                //Emaillist(currentPage);
                //分页
                $("#ewprevPage").click(function () {
                    if (currentPage > 1) {
                        currentPage--;
                        Emaillist(currentPage);
                    }
                });
                $("#ewnextPage").click(function () {
                    currentPage++;
                    Emaillist(currentPage);
                });

                var where = ['OUTPUT_QTY', 'FAIL', 'YIELD'];
                var whereHTML = null;
                for (var i = 0; i < where.length; i++) {
                    whereHTML += `
                    <tr>
                        <td><input type="checkbox" name="vehicle" class="checkbox_${where[i]}" /></td>
                        <td>
                            <select id="whereparm" name="whereparm" class="parm_${where[i]}" >
                                <option value="FAIL">FAIL</option>
                                <option value="YIELD">YIELD</option>
                                <option value="OUTPUT_QTY">OUTPUT</option>
                            </select>
                        </td>
                        <td>
                            <select id="where" name="where" class="where_${where[i]}" >
                                <option value="=">=</option>
                                <option value="!=">!=</option>
                                <option value=">">></option>
                                <option value=">=">>=</option>
                                <option value="<"><</option>
                                <option value="<="><=</option>
                            </select>
                        </td>
                        <td><input type="text" class="vaule_${where[i]}" name="vaule" placeholder="Enter your vaule"></td>
                    </tr>`;
                    $("#tbodyconfig").html(whereHTML);
                }

                /*创建邮件任务*/
                function Createmailtask() {
                    //获取where
                    var concatenatedWhere  = "";
                    var emawarglist = document.getElementById("wheretable");
                    var rows = emawarglist.rows;
                    for (var i = 1; i < rows.length; i++) {
                        var row = rows[i];
                        var checkbox = row.cells[0].querySelector('input[type="checkbox"]');
                        var isChecked = checkbox.checked;
                        if (isChecked) {
                            var whereparm = row.closest("tr").querySelector("select[name='whereparm']").value;
                            var where = row.closest("tr").querySelector("select[name='where']").value;
                            var value = row.closest("tr").querySelector("input[name='vaule']").value;
                            concatenatedWhere  += ` AND ${whereparm} ${where} ${value}`;
                        }
                    }
                    var parm = {
                        title: $("#em-title").val(),
                        message: $("#em-message").val(),
                        echarts: $("#echarts").val(),
                        syntype: $("#syntype").val(),
                        status: $('input[name=taskstate]:checked').val() == "false" ? 1 : 2,
                        where: concatenatedWhere,
                        emailaddress: JSON.stringify(recipientsemail)
                        /*vaule*/
                        //emailaddress: Object.values(recipientsemail).toString()
                        /*key*/
                        //Object.keys(recipientsemail)
                    };
                    //转json
                    var json = JSON.stringify(recipientsemail);
                    //json转集合对象
                    var parse = JSON.parse(json);
                    $.ajax({
                        url: api + '/Dashboard/CreateMailTask?' + $.param(parm),
                        type: 'POST',
                        dataType: "json",
                        success: function (data) {
                            if (data.ReturnData) {
                                alert("success");
                                $(".modal-emawarg").fadeOut();
                            } else {
                                alert(ReturnData);
                            }
                        }
                    });
                }
            </script>
        </div>
    </div>
    <!-- 模态框 --邮件预警配置 邮件收件人 -->
    <div class="modal-email">
        <div class="modal-list family">
            <span class="close" onclick="ModalClose('modal-email')">×</span>
            <p class="modal-title">选择-邮件收件人</p>
            <br>
            <div class="form-flex">
                <label for="title">部门</label>
                <select id="department" name="department"></select>
                <table id="emillist" class="modaltable">
                    <thead>
                        <tr>
                            <th><input id="all_email_checkbox" type="checkbox" /></th>
                            <th>部门</th>
                            <th>人员</th>
                            <th>邮件</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyemail"></tbody>
                </table>
                <div id="pagination">
                    <button id="emai_list_prevPage">上一页</button>
                    <span id="emai_list_currentPage">1</span>
                    <button id="emai_list_nextPage">下一页</button>
                </div>
                <label for="email">收件人</label>
                <textarea style="height: 0.7rem; resize: none;" id="emailaddress" name="address" placeholder="Enter your email" rows="3" oninput="updateValue()"></textarea>
                <button type="submit" style="font-weight: bold; height:0.5rem;" onclick="modalemailclose()">Submit</button>
            </div>

            <script>
                var department;
                var getmaillist;
                var currentPage = 1;
                var itemsPerPage = 5;
                function GetMail() {
                    $.ajax({
                        type: "GET",
                        url: api +"/Dashboard/GetMail",
                        dataType: "json",
                        success: function (data) {
                            var departmentHTML = "";
                            department = data.ReturnData.department;
                            getmaillist = data.ReturnData.list;
                            $("#department").empty();
                            for (var i = 0; i < department.length; i++) {
                                departmentHTML += `<option value="${department[i].name}">${department[i].name}</option>`;
                            }
                            $("#department").html(departmentHTML);
                            optionloading($("#department").val());
                        }
                    });
                }
                $(document).on('change', '#department', function () {
                    var department = $(this).val();
                    if (department) {
                        $('#all_email_checkbox').prop('checked', false);
                        $("#emai_list_nextPage").prop("disabled", false).css("background-color", "#07a3fd");
                        optionloading(department);
                    }
                });
                function optionloading(deptname) {
                    var optionHTML = "";
                    $("#tbodyemail").empty();
                    var index = 0;
                    for (var i = 0; i < getmaillist.length; i++) {
                        if (index >= itemsPerPage) { break; }
                        if (getmaillist[i].emp_deptname == deptname) {
                            index++;
                            optionHTML += `
                                <tr>
                                    <td><input type="checkbox" name="vehicle" class="checkbox_${i}" onclick="checkboxrows()"></td>
                                    <td>${getmaillist[i].emp_deptname}</td>
                                    <td>${getmaillist[i].Emp_name}</td>
                                    <td>${getmaillist[i].Emp_email}</td>
                                </tr>`;
                        }
                    }
                    $("#tbodyemail").html(optionHTML);
                    currentPage = 1;
                    $("#emai_list_currentPage").text(currentPage);
                }

                /*分页*/
                $("#emai_list_prevPage").click(function () {
                    if (currentPage > 1) {
                        currentPage--;
                        loadPage(currentPage);
                    }
                });
                $("#emai_list_nextPage").click(function () {
                    currentPage++;
                    loadPage(currentPage);
                });

                function loadPage(page) {
                    $('#all_email_checkbox').prop('checked', false);
                    var deptname = $("#department").val();
                    var trhtml = "";
                    $("#tbodyemail").empty();
                    var index = 0;
                    var trcount = 0;
                    //部门总人数
                    for (var i = 0; i < getmaillist.length; i++) {
                        if (getmaillist[i].emp_deptname == deptname) {
                            index++;
                            var pageindex = (currentPage - 1) * itemsPerPage + 1;
                            if (index >= pageindex && index <= (currentPage * itemsPerPage)) {
                                trcount++;
                                trhtml += `
                                <tr>
                                    <td><input type="checkbox" name="vehicle" class="checkbox_${i}" onclick="checkboxrows()"></td>
                                    <td>${getmaillist[i].emp_deptname}</td>
                                    <td>${getmaillist[i].Emp_name}</td>
                                    <td>${getmaillist[i].Emp_email}</td>
                                </tr>`;
                            }
                        }
                    }
                    if (trcount < itemsPerPage) {
                        $("#emai_list_nextPage").prop("disabled", true).css("background-color", "gray");
                    } else {
                        $("#emai_list_nextPage").prop("disabled", false).css("background-color", "#07a3fd");
                    }
                    $("#emai_list_currentPage").text(page);
                    $("#tbodyemail").html(trhtml);
                }

                /*全选*/
                $('#all_email_checkbox').prop('checked', false);
                $('#all_email_checkbox').click(function () {
                    $('#tbodyemail input[type="checkbox"]').prop('checked', this.checked);
                    checkboxrows();
                });

                var recipientsemail = {};
                function checkboxrows() {
                    /* //获取checkbox
                     var checkbox = document.querySelector('#emillist tr:first-child input[type="checkbox"]');
                     var isChecked = checkbox.checked;
                     */
                    //if (Object.keys(recipientsemail).length < 4) {
                    //    $('#all_email_checkbox').prop('checked', false);
                    //}
                    var emillist = document.getElementById("emillist");
                    var rows = emillist.rows;
                    for (var i = 1; i < rows.length; i++) {
                        var row = rows[i];
                        var checkbox = row.cells[0].querySelector('input[type="checkbox"]');
                        var isChecked = checkbox.checked;
                        if (isChecked) {
                            recipientsemail[row.cells[2].innerText] = row.cells[3].innerText;
                        } else {
                            //判断key是否存在
                            if (recipientsemail.hasOwnProperty(row.cells[2].innerText)) {
                                delete recipientsemail[row.cells[2].innerText];
                            }
                        }
                    }
                    $("#emailaddress").val(Object.keys(recipientsemail).toString())
                }
                function modalemailclose() {
                    ModalClose('modal-email');
                    $("#email").val(Object.keys(recipientsemail).toString())
                }
                function updateValue() {
                    var input = document.getElementById("emailaddress");
                    var value = input.value;
                    // 逗号分隔名字数组
                    var names = value.split(",");
                    // 删除包含被删除名字的名字并重新组合值
                    var newValue = names.filter(name => !name.includes(getDeletedName())).join(",");
                    input.value = newValue;
                    $("#email").val(newValue);
                    //重新组合邮件
                    var allowedKeys = newValue.split(",");
                    for (var key in recipientsemail) {
                        if (!allowedKeys.includes(key)) {
                            delete recipientsemail[key];
                        }
                    }
                }
                function getDeletedName() {
                    var input = document.getElementById("emailaddress");
                    // 获取光标位置
                    var cursorPosition = input.selectionStart;
                    var value = input.value;
                    // 逗号分隔名字数组
                    var names = value.split(",");
                    //根据光标位置找到要删除的名字
                    var deletedName = "";
                    var currentPosition = 0;
                    for (var i = 0; i < names.length; i++) {
                        //1是逗号的长度
                        currentPosition += names[i].length + 1;
                        if (currentPosition > cursorPosition) {
                            deletedName = names[i];
                            break;
                        }
                    }
                    return deletedName;
                }
            </script>
        </div>
    </div>

    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        //公告轮播列表
        publicmessage();
        function publicmessage() {
            var pam = {
                page: 1,
                itemsPerPage: 1000
            };
            $.ajax({
                url: api + '/Dashboard/GetPublicMsg?' + $.param(pam),
                type: 'POST',
                success: function (data) {
                    var tableHTML = "";
                    for (var i = 0; i < data.ReturnData.length; i++) {
                        if (parseInt(data.ReturnData[i].STATUS) > 1) {
                            tableHTML += '<li>' + data.ReturnData[i].TITLE + ':' + data.ReturnData[i].MESSAGE + '</li>';
                        }
                    }
                    $(".msli").html(tableHTML);
                    lunbo();
                }
            });
        }
        //轮播定时器
        var timer;
        function lunbo() {
            clearInterval(timer);
            var num = $(".msli").find("li").length;
            if (num > 1) {
                timer = setInterval(function () {
                    $('.msli').animate({
                        marginTop: "-0.22rem"
                    }, 1500, function () {
                        $(this).css({ marginTop: "0" }).find("li:first").appendTo(this);
                    });
                }, 12000);
            }
        }

        //发布信息列表
        var currentPage = 1;
        var itemsPerPage = 5;
        function loadTableData(page) {
            var tableHTML = "";
            var pam = {
                page: page,
                itemsPerPage: itemsPerPage
            };
            $.ajax({
                url: api + '/Dashboard/GetPublicMsg?' + $.param(pam),
                type: 'POST',
                success: function (data) {
                    tableHTML = "";
                    if (data.ReturnData.length != itemsPerPage) {
                        $("#nextPage").prop("disabled", true).css("background-color", "gray");
                    }
                    else {
                        $("#nextPage").prop("disabled", false).css("background-color", "#07a3fd");
                    }
                    for (var i = 0; i < data.ReturnData.length; i++) {
                        var status = parseInt(data.ReturnData[i].STATUS) > 1 ? "@Html.Raw(Label.Enable)" : "@Html.Raw(Label.Forbidden)";
                        var ststyle = parseInt(data.ReturnData[i].STATUS) > 1 ? "enable" : "disable";
                        tableHTML += '<tr>';
                        tableHTML += '<td>' + data.ReturnData[i].MESSAGE_ID + '</td>';
                        tableHTML += '<td>' + data.ReturnData[i].TITLE + '</td>';
                        tableHTML += '<td>' + data.ReturnData[i].MESSAGE + '</td>';
                        tableHTML += '<td><button id="' + ststyle + '">' + status + '</button></td>';
                        tableHTML += '<td><button id="btn_upadte" onclick="msgaddorup(\'update\',' + data.ReturnData[i].MESSAGE_ID + ')">@Html.Raw(Label.Update)</button>&nbsp;&nbsp;<button id="btn_add" onclick="msgaddorup(\'add\',' + data.ReturnData[i].MESSAGE_ID + ')">@Html.Raw(Label.Add)</button></td>';
                        tableHTML += '</tr>';
                    }
                    $("#tablelist>tbody").html(tableHTML);
                    $("#currentPage").text(page);
                }
            });
        }
        loadTableData(currentPage);
        //分页
        $("#prevPage").click(function () {
            if (currentPage > 1) {
                currentPage--;
                loadTableData(currentPage);
            }
        });
        $("#nextPage").click(function () {
            currentPage++;
            loadTableData(currentPage);
        });

        //模态弹框
        var uploadType, ExportType;
        var ModalShow = function (type) {
            uploadType = type;
            ExportType = type;
            switch (type) {
                case "Pro_Output_Target":
                    $("#Item").text("@Html.Raw(Label.Settings+Label.Process+Label.Output+Label.Target)！");
                    $(".modal").fadeIn();
                    break;
                case "Emp_Output_target":
                    $("#Item").text("@Html.Raw(Label.Settings+Label.People+Label.Output+Label.Target)！");
                    $(".modal").fadeIn();
                    break;
                case "Binding_Test_Item":
                    $("#Item").text("@Html.Raw(Label.Process+Label.Bind+Label.Equipment+Label.Tests+Label.Item)！");
                    $(".modal").fadeIn();
                    break;
                case "Binding_Equipment":
                    $("#Item").text("@Html.Raw(Label.Process+Label.Bind+Label.Equipment)！");
                    var exportHTML = `<label><button type="submit" style="background-color: #49c5ce;" onclick="EquipmentData()"><span><img src="/images/ProcessCapacity/Excel.ico" alt="Excel" class="icon"></span>@Html.Raw(Label.Export+Label.Correlation+Label.Data)</button></label>`;
                    $("#export").html(exportHTML);
                    $(".modal").fadeIn();
                    break;
                case "PublicMsg":
                    $(".modal-msg").fadeIn();
                    break;
                case "EmailWarning":
                    $(".modal-emawarg").fadeIn();
                    break;
                case "Recipient":
                    $(".modal-email").fadeIn();
                    GetMail();
                    break;
            }
        }

        //模态修改信息绑定
        var msgaddoruptype, mesageid;
        function msgaddorup(type, id) {
            msgaddoruptype = type;
            if (type == "update") {
                var tablelist = document.getElementById("tablelist");//获取所有的table
                var rows = tablelist.rows;//获取所有行
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];//获取每一行
                    if (parseInt(row.cells[0].innerText) == id) {
                        $("#Item-msg").text("@Html.Raw(Label.Update+Label.Notice+Label.Content)！");
                        mesageid = id;
                        $('#title').val(row.cells[1].innerText);
                        $('#msg-message').val(row.cells[2].innerText);
                        var status = row.cells[3].innerText == "@Html.Raw(Label.Forbidden)" ? true : false;
                        if (status) {
                            $('input[name="status"][value="false"]').prop('checked', true);
                        } else {
                            $('input[name="status"][value="true"]').prop('checked', true);
                        }
                    }
                }
            }
            if (type == "add") {
                $('#title').val("");
                $('#msg-message').val("");
                $("#Item-msg").text("@Html.Raw(Label.Add+Label.Notice+Label.Message)！");
            }
            $(".modal-msg-add-up").fadeIn();
        }
        function ModalClose(modalname) {
            $("#export").empty();
            var close = document.getElementsByClassName(modalname);
            $(close).fadeOut();
        }

        //修改or添加公告信息
        function Msgaddorup() {
            var pam = {
                type: msgaddoruptype,
                mesageid: String(mesageid),
                message: $('#msg-message').val(),
                title: $('#title').val(),
                status: $('input[name=status]:checked').val() == "false" ? 1 : 2
            };
            $.ajax({
                url: api + '/Dashboard/SetPublicMsg?' + $.param(pam),
                type: 'POST',
                success: function (data) {
                    //重新加载列表
                    loadTableData(currentPage);
                    //重新加载公告
                    publicmessage();
                    $(".modal-msg-add-up").fadeOut();
                }
            });
        }

    </script>
    
    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        //alert("当天工序产能看板-将改版区分出，组装工序产能看板、测试工序产能看板，如果查询分析，请打开对应的看板")
        //模板初始化配置
        var asyncType = false;
        $(document).ready(function () {
            var whei = $(window).height();
            $("html").css({ fontSize: whei / 12.5 });
            $(window).resize(function () {
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    var whei = $(window).height();
                    $("html").css({ fontSize: whei / 12.5 });
                }
                else {
                    var whei = $(window).width();
                    $("html").css({ fontSize: whei / 22 })
                }
            });

            /*当前时间*/
            function numberToUpperCase(number) {
                var uppercaseMonths = [
                    '一月','二月','三月','四月','五月','六月',
                    '七月','八月','九月','十月','十一月','十二月'
                ];
                return uppercaseMonths[number - 1];
            }
            var myDate = new Date();
            var result = numberToUpperCase(myDate.getMonth() + 1);
            $('.header-title').html("@Label.OTD@Label.Capacity@Label.Board");
            function getTime() {
                var myDate = new Date();
                var myYear = myDate.getFullYear(); //年
                var myMonth = myDate.getMonth() + 1; //月
                var myToday = myDate.getDate(); //日
                var myDay = myDate.getDay(); //星期
                var myHour = myDate.getHours(); //小时
                var myMinute = myDate.getMinutes(); //分钟
                var mySecond = myDate.getSeconds(); //秒数
                var week = ['@Label.Sunday', '@Label.Monday', '@Label.Tuesday', '@Label.Wednesday', '@Label.Thursday', '@Label.Friday', '@Label.Saturday'];
                var nowTime;

                nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
                $('#time').html(nowTime);
            };
            function fillZero(str) {
                var realNum;
                if (str < 10) {
                    realNum = '0' + str;
                } else {
                    realNum = str;
                }
                return realNum;
            }
            setInterval(getTime, 1000);

            // 设置全屏
            $('.dimension').on('click', function (e) {
                var element = document.documentElement;
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {       //兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {    //兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {        //兼容IE
                        element.msRequestFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Exit+Label.Full)");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Full)");
                }
            });
        });

        function showMessage(msg) {
            var messageElement = $('<div>').addClass('message-box').text(msg);
            $('body').append(messageElement);
            messageElement.hide().fadeIn(500);
            setTimeout(function () {
                messageElement.fadeOut(500, function () {
                    messageElement.remove();
                });
            }, 10 * 60 * 1000);
        }

        //初始化图表
        var memachinetype;
        var chartIds = ['Tab1', 'Tab2', 'Tab3', 'Tab4'];
        //图表自适应大小
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }

        //Tab页签定时切换
        var Tabtimer;
        function TabInterval() {
            clearInterval(Tabtimer);
            var i = 0;
            function clickButton(buttons) {
                //模拟触发按钮的 onclick 方法
                buttons[i].click();
                i++;
                if (i === buttons.length) {
                    i = 0;
                }
            }
            /*clickButton();//初始化*/
            //每隔5m执行一次
            Tabtimer = setInterval(function () {
                clickButton($(".tablinks"));
                echartsautomatic();
            }, 10 * 60 * 1000);
        }

        var query = function () {
            //下拉是否选中
            if (stateselected()) {
                /*注销echarts渲染*/
                chartIds.forEach(function (chartId) {
                    var chart = echarts.init(document.getElementById(chartId));
                    chart.dispose();
                });
                /*重新绑定*/
                TestItem();                               //测试项生成
                //GetToMonthTotal("Tab1");                //当月工序产出累计
                GetToDay("Tab1");                         //当天工序小时累计产出
                GetUtilizationRate("Tab2");               //设备利用率
                //GetFisToDayMachine("Tab2");             //当天机台产出
                GetToDayOperatorYield("Tab3");            //当天员工产出&良率
                GetToDayMeMachine("Tab4");                //当天ME机台
                //GetToDayEquipmentStatus("Tab2");        //当前设备状态
                //GetToDay("Tab2");
                //GetToDayEmsStatus("Tab2");
                //GetFisToDayMachine("Tab3");
                //GetToMonthYield("Tab3");
                //GetToDayOperatorYield("Tab2");
                //GetToDayMeMachine("Tab4");
                echartsautomatic();
                TabInterval();
            }
        }

        /*下拉框状态*/
        function stateselected() {
            var state = false;
            if ($('#cmb_proj_code').prop('selectedIndex') > 0) {
                state = true;
            }
            if ($('#cmb_product_code').prop('selectedIndex') > 0) {
                state = true;
            }
            return state;
        }

        /*散点图测试项tab页签 生成*/
        var TestItemKey;
        function TestItem() {
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val()
            };
            $.ajax({
                type: "POST",
                //url = "http://localhost:44304/Dashboard/GetThisMonthOrDayProcessMachineOutput?" + $.param(pam);
                url: api + "/Dashboard/GetMeTestItem",
                data: pam,
                //设置同步,无结果 memachinetype是null
                async: asyncType,
                dataType: "json",
                success: function (data) {
                    var tableHTML = "";
                    if (data.ReturnData.length > 0) {
                        TestItemKey = {};
                        for (var i = 0; i < data.ReturnData.length; i++) {
                            memachinetype = data.ReturnData[0].GROUP_TEXT;
                            var groupText = data.ReturnData[i].GROUP_TEXT;
                            var lineItem = data.ReturnData[i].LINE_ITEM;
                            var columnItem = data.ReturnData[i].COLUMN_ITEM;
                            if (!TestItemKey[groupText]) {
                                TestItemKey[groupText] = [];
                            }
                            TestItemKey[groupText].push({
                                LINE_ITEM: lineItem,
                                COLUMN_ITEM: columnItem
                            });
                            tableHTML += `<li style="display: inline-block;"><button class="tablinks ${i < 1 ? 'active' : ''}" onclick="OpenTab(event,'right-bottom','Tab4',Getmemachine('${data.ReturnData[i].GROUP_TEXT}'),${i})">${data.ReturnData[i].GROUP_TEXT}</button></li>`;
                        }
                    }
                    else {
                        tableHTML = `<li style="display: inline-block;"><button onclick="ModalShow('Binding_Test_Item')">@Html.Raw(Label.Bind+Label.Tests+Label.Item)</button></li>`;
                    }
                    $("#listContainer").html(tableHTML);
                }
            });
        }

        //初始化三级联动
        $(document).ready(function () {
            var firstLevelSelect = $('#cmb_proj_code');
            var secondLevelSelect = $('#cmb_product_code');
            var thirdLevelSelect = $('#cmb_process_code');
            var projcodeSelect = $('#projcode');
            var productSelect = $('#product');
            var processSelect = $('#process');
            $('#cmb_classtype').prop('selectedIndex', 0);
            $('#cmb_prod_type').prop('selectedIndex', 0);
            $(document).on('change', '#cmb_classtype', function () {
                var classtype = $(this).val();
                if (classtype) {
                    var headerTitle;
                    if (classtype == "OTD") {
                        $(".soe").show();
                        headerTitle = "@Html.Raw(Label.OTD + Label.Capacity + Label.Board)";
                        $("button:contains('@Html.Raw(Label.YTD)')").text(function () {
                            return $(this).text().replace("@Html.Raw(Label.YTD)", "@Html.Raw(Label.OTD)");
                        });
                    } else if (classtype == "YTD") {
                        $(".soe").hide(); $(".soe").addClass("hidden");
                        headerTitle = "@Html.Raw(Label.YTD + Label.Capacity + Label.Board)";
                        $("button:contains('@Html.Raw(Label.OTD)')").text(function () {
                            return $(this).text().replace("@Html.Raw(Label.OTD)", "@Html.Raw(Label.YTD)");
                        });
                    }
                    var oldLabel = classtype === "OTD" ? '@Html.Raw(Label.YTD)' : '@Html.Raw(Label.OTD)';
                    var newLabel = classtype === "OTD" ? '@Html.Raw(Label.OTD)' : '@Html.Raw(Label.YTD)';
                    var regex = new RegExp(oldLabel, 'g');
                    $('.tablinks').each(function () {
                        $(this).text($(this).text().replace(regex, newLabel));
                    });
                    $('.header-title').html(headerTitle);
                }
            });

            $.ajax({
                //url: 'http://localhost:44304/Dashboard/GetComProjCode',
                url: api + '/Dashboard/GetComProjCode',
                type: 'POST',
                success: function (data) {
                    populateSelect(projcodeSelect,data.ReturnData,true);
                    populateSelect(firstLevelSelect,data.ReturnData,true);
                }
            });

            function populateSelect(select,data,defaultOptionText) {
                select.empty();
                if (defaultOptionText) {
                    select.append($('<option>',{
                        value: null,
                        text: '@Html.Raw(Label.PleaseSelect)'
                    }));
                }
                else {
                    select.append($('<option>',{
                        value: 'ALL',
                        text: 'ALL'
                    }));
                }
                $.each(data,function (key,value) {
                    select.append($('<option>',{
                        value: value.value,
                        text: value.text
                    }));
                });
            }

            function fetchData(select,projcode,product) {
                $.ajax({
                    //url: 'http://localhost:44304/Dashboard/GetComProductCode',
                    url: api + '/Dashboard/GetComProductCode',
                    type: 'POST',
                    data: { proj_code: projcode },
                    success: function (data) {
                        populateSelect(select, data.ReturnData, true);
                    }
                });
            }

            $(document).on('change','#projcode',function () {
                productSelect.empty();
                processSelect.empty();
                var projcode = $(this).val();
                if (projcode) {
                    fetchData(productSelect,projcode);
                }
            });

            $(document).on('change','#cmb_proj_code',function () {
                secondLevelSelect.empty();
                thirdLevelSelect.empty();
                var projcode = $(this).val();
                if (projcode) {
                    fetchData(secondLevelSelect,projcode);
                }
            });

            $(document).on('change', '#product', function () {
                var projcode = projcodeSelect.val();
                var product = $(this).val();
                populateProcessSelect(processSelect, projcode, product);
            });

            $(document).on('change', '#cmb_product_code', function () {
                var projcode = firstLevelSelect.val();
                var product = $(this).val();
                populateProcessSelect(thirdLevelSelect, projcode, product);
                /*if (product != "ALL") { query(); }*/
            });
            $(document).on('change', '#cmb_process_code, #cmb_classtype,#cmb_prod_type', query);

            function populateProcessSelect(select,projcode,product) {
                select.empty();
                select.append($('<option>',{
                    value: 'ALL',
                    text: 'ALL'
                }));
                if (product) {
                    $.ajax({
                        //url: 'http://localhost:44304/Dashboard/GetComProcessCode',
                        url: api + '/Dashboard/GetComProcessCode',
                        type: 'POST',
                        data: { proj_code: projcode,product_code: product },
                        success: function (data) {
                            populateSelect(select, data.ReturnData, true);
                        }
                    });
                }
            }
        });

        var Openforms = function () {
            window.open(url + "/Report/EquipmentAdd", "_blank");
        }

        /*导出生产数据*/
        var ProductionDataExport = function (type) {
            ExportType = type;
            ExportToExcel();
        }

        /*设备数据导出*/
        var EquipmentData = function () {
            ExportType = "Equipment_Data";
            ExportToExcel();
        }

        /*目标值导出*/
        var ExportToExcel = function () {
            var projcode = $('#projcode').val();
            var product = $('#product').val();
            var pam = {
                type: ExportType,
                proj_code: $('#projcode').val(),
                product_code: $('#product').val() == null ? "ALL" : $('#product').val(),
                process_code: $('#process').val() == null ? "ALL" : $('#process').val()
            };
            if (ExportType == "Production") {
                projcode = $('#cmb_proj_code').val();
                product = $('#cmb_product_code').val();
                pam = {
                    type: ExportType,
                    proj_code: $('#cmb_proj_code').val(),
                    product_code: $('#cmb_product_code').val() == null ? "ALL" : $('#cmb_product_code').val(),
                    process_code: $('#cmb_process_code').val() == null ? "ALL" : $('#cmb_process_code').val(),
                    cl_type: $("#cmb_classtype").val()
                }
            }
            //var url = "http://localhost:44304/Dashboard/ExportToExcel?" + $.param(pam);
            var url = api + "/Dashboard/ExportToExcel?" + $.param(pam);
            if (projcode && product) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET',url,true);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        var url = window.URL.createObjectURL(xhr.response);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = ExportType.toLocaleUpperCase()+'.xlsx';
                        a.click();
                        window.URL.revokeObjectURL(url);
                    }
                };
                /*
                var formData = new FormData();
                formData.append('CL_TYPE', $("#cmb_classtype").val());
                xhr.send(formData);
                */
                xhr.send();
            }
        }
        /*目标值上传*/
        var UploadExcel = function () {
            var fileInput = document.getElementById("Template");
            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append("file", file);
            //formData.append("type", uploadType);
            formData.append("type", ExportType);
            var projcode = $('#projcode').val();
            var product = $('#product').val();
            if (projcode && product) {
                $.ajax({
                    type: "POST",
                    //url: "http://localhost:44304/Dashboard/UploadExcel",
                    url: api + "/Dashboard/UploadExcel",
                    enctype: 'multipart/form-data',
                    data: formData,
                    async: asyncType,
                    processData: false,// 禁止将数据转换为查询字符串
                    contentType: false,// 禁止设置请求头的Content-Type
                    crossDomain: true,
                    success: function (data) {
                        if (data.Success) {
                            alert("successfully");
                            //$('#product').empty();
                            //$('#process').empty();
                            $("#Template").val('');
                            $("#message").val('');
                            $(".modal").fadeOut();
                        }
                    }
                });
            }
        }

        /*ME机台测试项区分*/
        var Getmemachine = function (type) {
            memachinetype = type;
        }

        function InCheck() {
            var proj_selIndex = $('#cmb_proj_code option:selected').index();
            var product_selIndex = $('#cmb_product_code option:selected').index();
            if (proj_selIndex == 0 && product_selIndex == 0) {
                return false;
            }
            return true;
        }

        /*Tab切换*/
        function OpenTab(evt, panle, id, echar_name, itemindex = -1) {
            var i,tablinks;
            tablinks = document.getElementsByClassName(panle)[0].getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace("active","");
            }
            evt.currentTarget.className += " active";
            //注销eacharts
            let chart = echarts.init(document.getElementById(id));
            chart.dispose();
            /*TabItem 页签滚动*/
            if (itemindex>-1)
            {
                var listContainer = document.getElementById("listContainer");
                var listItem = listContainer.children[itemindex];
                var scrollContainer = document.getElementById("scrollContainer");
                // 计算要滚动的距离
                var scrollLeft = listItem.offsetLeft - scrollContainer.offsetLeft;
                // 滚动到指定位置
                //scrollContainer.scrollLeft = scrollLeft;
                scrollContainer.scrollTo({
                    left: scrollLeft,
                    behavior: "smooth",
                });
            }
            /*委托事件*/
            if (!memachinetype) {
                echar_name(id);
            }
            else {
                GetToDayMeMachine(id);
            }
            echartsautomatic();
        }

    </script>

    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        /*当月工序产出累计*/
        var GetToMonthTotal = function (id) {
            if (!InCheck()) {
                return;
            }
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val() };
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                //type: 'DAY'
                type: 'MONTH',
                header_key: JSON.stringify(whe)
            };

            $.ajax({
                type: "POST",
                //var url = "http://localhost:44304/Dashboard/GetThisMonthOrDayProcessOutput?" + $.param(pam);
                url: api + "/Dashboard/GetThisMonthOrDayProcessOutput",
                data: pam,
                dataType: "json",
                success: function (data) {
                    ToMonthTotalChart(data,id);
                }
            });
        }

        var ToMonthTotalChart = function (dt,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            const jsonData = dt.ReturnData;
            if ($("#cmb_process_code").prop("selectedIndex") != 0) {
                var data = dt.ReturnData;
                // 定义X轴和两个Y轴的数据
                var xData = data.map(function (item) {
                    return item.DAY;
                });
                var yData1 = data.map(function (item) {
                    return item.TOTAL_OUTPUT_QTY;
                });
                var yData2 = data.map(function (item) {
                    return item.TOTAL_TARGET;
                });
                var vaulemax = Math.max.apply(null,yData1);
                // 配置图表选项
                var option = {
                    title: { show: false },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.13rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: 10
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'white'
                            }
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '8%',
                        bottom: '10%',
                        width: '90%'
                    },
                    legend: {
                        width: '100%',
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.13rem'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            color: '#fff',
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            max: Math.ceil(vaulemax),
                            interval: Math.ceil(vaulemax / 6),
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.14rem'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                             max: Math.ceil(vaulemax),
                            interval: Math.ceil(vaulemax / 6),
                            axisLabel: {
                                show: false,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.14rem'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'TARGET',
                            type: 'line',
                            yAxisIndex: 1,
                            data: yData2
                        },
                        {
                            name: 'OUTPUT_QTY',
                            type: 'bar',
                            stack: 'stack1',// 堆叠stack属性
                            data: yData1
                        },
                        {
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',//堆叠stack属性
                            data: data.map(function (item) {
                                return item.FAIL_QTY;
                            })
                        },
                    ]
                };
                myChart.setOption(option);
            }
            else {
                // 生成xAxis的data
                const xAxisData = Array.from(new Set(jsonData.map(item => item.DAY)));
                // 生成legend的data
                const legendData = Array.from(new Set(jsonData.map(item => item.PROCESS_ID)));
                // 生成series的data
                const seriesData = legendData.map(processId => {
                    return {
                        name: processId,
                        type: 'line',
                        smooth: true,
                        data: xAxisData.map(day => {
                            const item = jsonData.find(data => data.DAY === day && data.PROCESS_ID === processId);
                            return item ? item.TOTAL_OUTPUT_QTY : 0;
                        })
                    };
                });
                var option = {
                    title: { show: false },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.13rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: 10
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'white'
                            }
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '1%',
                        bottom: '10%',
                        width: '95%'
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: legendData,
                        orient: 'horizontal',
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: 'white',
                        pageTextStyle: {
                            fontSize: '0.13rem',
                            color: 'white',
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.13rem'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {
                            color: '#fff',
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            onZero: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.14rem'
                            },
                            verticalAlign: 'bottom',
                            align: 'left',
                            margin: 0
                        }
                    },
                    series: seriesData
                };
                myChart.setOption(option);
            }
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        /*当天工序小时产出*/
        var GetToDay = function (id) {
            if (!InCheck()) {
                return;
            }
            let chart = echarts.init(document.getElementById(id));
            chart.dispose();
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val() };
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'DAY',
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                //url: "http://localhost:44304/Dashboard/GetThisMonthOrDayProcessOutput?" + $.param(pam),
                url: api + "/Dashboard/GetThisMonthOrDayProcessOutput",
                data: pam,
                async: asyncType,
                dataType: "json",
                success: function (data) {
                    ToDayChart(data,id);
                }
            });
        }

        var ToDayChart = function (dt,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            const jsonData = dt.ReturnData;

            if ($("#cmb_process_code").prop("selectedIndex") != 0) {
                var myChart = echarts.init(chart);
                var data = dt.ReturnData;
                // 定义X轴和两个Y轴的数据
                var xData = data.map(function (item) {
                    return item.HOUR;
                });
                var yData1 = data.map(function (item) {
                    return item.TOTAL_OUTPUT_QTY;
                });
                var yData2 = data.map(function (item) {
                    return item.TOTAL_TARGET;
                });
                var maxInteger = Math.ceil(Math.max.apply(null, yData2));
                var vaulemax = Math.max.apply(null, yData1);
                // 配置图表选项
                var option = {
                    title: { show: false },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        formatter: function (params) {
                            const order = ['TARGET', 'OUTPUT_QTY', 'FAIL'];
                            let tooltipString = params
                                .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                                .map(p => `${p.marker} ${p.seriesName}: ${Math.round(p.value)}<br/>`)
                                .join('');
                            return tooltipString;
                        },
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'white'
                            }
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        bottom: '12%',
                        width: '92%'
                    },
                    legend: {
                        data: ['TARGET', 'OUTPUT_QTY', 'FAIL'],
                        width: '100%',
                        itemGap: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 45,
                            color: '#fff',
                            fontSize: '0.16rem'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            //max: Math.ceil((maxInteger > 0 ? maxInteger : vaulemax) / 100) * 100,
                            //interval: Math.ceil(vaulemax / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.16rem'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 1000,
                            interval: 100,
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: false
                            },
                            axisLine: { //y轴
                                show: false
                            },
                            axisLabel: {
                                show: false,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.16rem'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'TARGET',
                            data: yData2,
                            type: 'line', smooth: true, lineStyle: { normal: { width: 3 } },
                            yAxisIndex: 0,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(3, 194, 236, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(3, 194, 236, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#03C2EC' } }
                        },
                        {
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',//堆叠stack属性
                            barCategoryGap: '50%', // 设置组内柱子的间距
                            /*barGap: '2%',        // 设置不同组之间的间距*/
                            barWidth: '40%',
                            data: data.map(function (item) {
                                return item ? item.FAIL_QTY : 0;
                            }),
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'OUTPUT_QTY',
                            type: 'bar',
                            stack: 'stack1',// 堆叠stack属性
                            data: yData1,
                            barCategoryGap: '50%', // 设置组内柱子的间距
                            /*barGap: '2%',        // 设置不同组之间的间距*/
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
            else {
                // 生成xAxis的data
                const xAxisData = Array.from(new Set(jsonData.map(item => item.HOUR)));
                // 生成legend的data
                const legendData = Array.from(new Set(jsonData.map(item => item.PROCESS_ID)));
                // 生成series的data
                const seriesData = legendData.map(processId => {
                    return {
                        name: processId,
                        type: 'line',
                        smooth: true,
                        data: xAxisData.map(day => {
                            const item = jsonData.find(data => data.HOUR === day && data.PROCESS_ID === processId);
                            return item ? item.OUTPUT_QTY : 0;
                        })
                    };
                });
                var option = {
                    title: { show: false },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'white'
                            }
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '2%',
                        bottom: '10%',
                        width: '95%'
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: legendData,
                        orient: 'horizontal',
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: 'white',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'white'
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            onZero: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            },
                            verticalAlign: 'bottom',
                            align: 'left',
                            margin: 0
                        }
                    },
                    series: seriesData
                };
                myChart.setOption(option);
            }
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        //当天复测
        var GetRetest = function (id) {
            if (!InCheck()) {
                return;
            }
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val()};
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'DAY_RETEST',
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                url: api + "/Dashboard/GetThisMonthOrDayProcessOutput",
                data: pam,
                async: asyncType,
                dataType: "json",
                success: function (data) {
                    RetestChart(data, id);
                }
            });
        }
        var RetestChart = function (dt, id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            const jsonData = dt.ReturnData;

            if ($("#cmb_process_code").prop("selectedIndex") != 0) {
                var myChart = echarts.init(chart);
                var data = dt.ReturnData;
                // 定义X轴和两个Y轴的数据
                var xData = data.map(function (item) {
                    return item.HOUR;
                });
                var yData1 = data.map(function (item) {
                    return item.INPUT_QTY;
                });
                var yData2 = data.map(function (item) {
                    return isNaN(item.OUTPUT_QTY / item.INPUT_QTY) ? 0 : (item.OUTPUT_QTY / item.INPUT_QTY) * 100;
                });
                var vaulemax = Math.max.apply(null, yData1);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                // 配置图表选项
                var option = {
                    title: { show: false },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        formatter: function (params) {
                            const order = ['INPUT_QTY', 'FAIL_QTY','YIELD'];
                            let tooltipString = params
                                .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                                .map(p => `${p.marker} ${p.seriesName}: ${Math.round(p.value)}<br/>`)
                                .join('');
                            return tooltipString;
                        },
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'white'
                            }
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        bottom: '12%',
                        width: '90%'
                    },
                    legend: {
                        data: ['OUTPUT_QTY', 'FAIL_QTY','YIELD'],
                        width: '100%',
                        itemGap: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 45,
                            color: '#fff',
                            fontSize: '0.16rem'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            max: yAxismax,
                            interval: Math.ceil(yAxismax / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.16rem'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    color: '#fff',
                                    fontSize: '0.16rem'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'FAIL_QTY',
                            type: 'bar',
                            stack: 'stack0',// 堆叠stack属性
                            data: data.map(function (item) {
                                return item ? item.INPUT_QTY - item.OUTPUT_QTY : 0;
                            }),
                            barCategoryGap: '50%', // 设置组内柱子的间距
                            /*barGap: '2%',        // 设置不同组之间的间距*/
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'OUTPUT_QTY',
                            type: 'bar',
                            stack: 'stack0',//堆叠stack属性
                            barCategoryGap: '50%', // 设置组内柱子的间距
                            /*barGap: '2%',        // 设置不同组之间的间距*/
                            barWidth: '40%',
                            data: data.map(function (item) {
                                return item ? item.OUTPUT_QTY : 0;
                            }),
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            data: yData2,
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#edb217 ' } }
                        }
                    ]
                };
                myChart.setOption(option);
            }
            else {
                // 生成xAxis的data
                const xAxisData = Array.from(new Set(jsonData.map(item => item.HOUR)));
                // 生成legend的data
                const legendData = Array.from(new Set(jsonData.map(item => item.PROCESS_ID)));
                // 生成series的data
                const seriesData = legendData.map(processId => {
                    return {
                        name: processId,
                        type: 'line',
                        smooth: true,
                        data: xAxisData.map(day => {
                            const item = jsonData.find(data => data.HOUR === day && data.PROCESS_ID === processId);
                            return item ? item.OUTPUT_QTY : 0;
                        })
                    };
                });
                var option = {
                    title: { show: false },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'white'
                            }
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '2%',
                        bottom: '10%',
                        width: '95%'
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: legendData,
                        orient: 'horizontal',
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: 'white',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'white'
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            onZero: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            },
                            verticalAlign: 'bottom',
                            align: 'left',
                            margin: 0
                        }
                    },
                    series: seriesData
                };
                myChart.setOption(option);
            }
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        /*当天FIS机台产出By Yield*/
        var GetFisToDayMachine = function (id) {
            if (!InCheck()) {
                return;
            }
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val() };
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'DAY',
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                //url = "http://localhost:44304/Dashboard/GetThisMonthOrDayProcessMachineOutput?" + $.param(pam);
                url: api + "/Dashboard/GetThisMonthOrDayProcessMachineOutput",
                data: pam,
                async: asyncType,
                dataType: "json",
                success: function (data) {
                    FisToDayMachineChart(data,id);
                }
            });
        }

        var FisToDayMachineChart = function (dt,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            var data = dt.ReturnData;
            // 定义X轴和两个Y轴的数据
            var xData = data.map(function (item) {
                return item.TESTER;
            });
            var yData1 = data.map(function (item) {
                return item.OUTPUT_QTY;
            });
            var yData2 = data.map(function (item) {
                return item.YIELD;
            });
            var InputData = data.map(function (item) {
                return item.INPUT_QTY;
            });
            var vaulemax = Math.max.apply(null, InputData);
            var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
            // 配置图表选项
            var option = {
                title: { show: false },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET', 'OUTPUT_QTY', 'FAIL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}: ${Math.round(p.value)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '25%',
                    width: '90%'
                },
                legend: {
                    data: ['YIELD','OUTPUT_QTY','FAIL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        show: true,
                        interval: xData.length > 30 ? Math.floor(xData.length / 30) : 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: yAxismax,
                        interval: Math.ceil(yAxismax / 6),
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',//堆叠stack属性
                        barCategoryGap: '40%', // 设置组内柱子的间距
                        /*barGap: '2%',        // 设置不同组之间的间距*/
                        barWidth: '60%',
                        data: data.map(function (item) {
                            return item ? item.FAIL : 0;
                        }),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'OUTPUT_QTY',
                        type: 'bar',
                        stack: 'stack1',// 堆叠stack属性
                        data: yData1,
                        barCategoryGap: '40%', // 设置组内柱子的间距
                        /*barGap: '2%',        // 设置不同组之间的间距*/
                        barWidth: '60%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#29a93e',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }, {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        data: yData2,
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217 ' } }
                    }
                ]
            };
            myChart.setOption(option);
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        /*当月工序良率*/
        var GetToMonthYield = function (id) {
            if (!InCheck()) {
                return;
            }
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val() };
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'MONTH',
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                //url: "http://localhost:44304/Dashboard/GetThisMonthOrDayProcessOutput",
                url: api + "/Dashboard/GetThisMonthOrDayProcessOutput",
                data: pam,
                dataType: "json",
                success: function (data) {
                    ToMonthYieldChart(data,id);
                }
            });
        }

        function ToMonthYieldChart(dt,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            const jsonData = dt.ReturnData;
            // 生成xAxis的data
            const xAxisData = Array.from(new Set(jsonData.map(item => item.DAY)));
            // 生成legend的data
            const legendData = Array.from(new Set(jsonData.map(item => item.PROCESS_ID)));
            // 生成series的data
            const seriesData = legendData.map(processId => {
                return {
                    name: processId,
                    type: 'line',
                    smooth: true,
                    data: xAxisData.map(day => {
                        const item = jsonData.find(data => data.DAY === day && data.PROCESS_ID === processId);
                        return item ? item.YIELD : 0;
                    })
                };
            });
            var option = {
                title: { show: false },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.13rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: 10
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '15%',
                    left: '1%',
                    bottom: '10%',
                    width: '95%'
                },
                legend: {
                    show: true,
                    width: '100%',
                    type: 'scroll',
                    data: legendData,
                    itemWidth: 10,
                    itemHeight: 10,
                    scrollDataIndex: 0,
                    pageIconSize: [12, 12],
                    orient: 'horizontal',
                    pageIconColor: 'white',
                    pageTextStyle: {
                        fontSize: '0.13rem',
                        color: 'white'
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.13rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        color: '#fff',
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 120,
                    interval: 20,
                    axisLine: {
                        onZero: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.14rem'
                        },
                        verticalAlign: 'bottom',
                        align: 'left',
                        margin: 0
                    }
                },
                series: seriesData
            };
            myChart.setOption(option);
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        /*当天员工产出By良率*/
        var ToDayOperatorOutput;
        var GetToDayOperatorYield = function (id) {
            if (!InCheck()) {
                return;
            }
            //var url = "http://localhost:44304/Dashboard/GetProOper?" + $.param(pam);
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val() };
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'DAY',//DAY、MONTH
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                url: api + "/Dashboard/GetProOper",
                data: pam,
                async: asyncType,
                dataType: "json",
                success: function (data) {
                    ToDayOperatorOutput = data.ReturnData;
                    ToDayOperatorYieldChart(data.ReturnData.Table,id);
                }
            });
        }
        var ToDayOperatorYieldChart = function (data,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            // 定义X轴和两个Y轴的数据
            var xData = data.map(function (item) {
                return item.OPERATOR_ID;
            });
            var yData1 = data.map(function (item) {
                return item.OUTPUT_QTY;
            });
            var yData2 = data.map(function (item) {
                return item.YIELD;
            });
            var yData3 = data.map(function (item) {
                return item.TARGET_VAULE;
            });
            var InputData = data.map(function (item) {
                return item.INPUT_QTY;
            });
            var vaulemax = Math.max.apply(null, InputData);
            var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
            // 配置图表选项
            var option = {
                title: { show: false },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET','YIELD', 'OUTPUT_QTY', 'FAIL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}: ${Math.round(p.value)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '12%',
                    width: '90%'
                },
                color: ['#FF3374', '#07c160'],
                legend: {
                    data: ['TARGET', 'YIELD', 'OUTPUT_QTY', 'FAIL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        show: true,
                        interval: xData.length > 30 ? Math.floor(xData.length / 30) : 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        //min: 0,
                        //max: Math.ceil(vaulemax),
                        //interval: Math.ceil(vaulemax / 6),
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        data: yData3,
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC' } }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        data: yData2,
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217 ' } }
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',//堆叠stack属性
                        barCategoryGap: '50%', // 设置组内柱子的间距
                        /*barGap: '2%',        // 设置不同组之间的间距*/
                        barWidth:'40%',
                        data: data.map(function (item) {
                            return item ? item.FAIL_QTY : 0;
                        }),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'OUTPUT_QTY',
                        type: 'bar',
                        stack: 'stack1',// 堆叠stack属性
                        data: yData1,
                        barCategoryGap: '50%', // 设置组内柱子的间距
                        /*barGap: '2%',        // 设置不同组之间的间距*/
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                ]
            };
            //myChart.setOption(option);
            var sparkletimer = setInterval(changeColor, 1000);
            var type = 0;
            function changeColor() {
                option.series[2].itemStyle = {
                    normal: {
                        color: function (params) {
                            const target_item = data.find(item => item.OPERATOR_ID === params.name);
                            const input_item = data.find(item => item.OPERATOR_ID === params.name);
                            var targetvaule = target_item ? target_item.TARGET_VAULE : 0;
                            var inputvaule = input_item ? input_item.INPUT_QTY : 0;
                            if (type === 0 || inputvaule > targetvaule) { return '#FF3374'; }
                            else { return 'rgba(0,0,0,0)'; }

                        }
                    }
                };
                option.series[3].itemStyle = {
                    normal: {
                        barBorderRadius: [10, 10, 0, 0],
                        color: function (params) {
                            const target_item = data.find(item => item.OPERATOR_ID === params.name);
                            const input_item = data.find(item => item.OPERATOR_ID === params.name);
                            var targetvaule = target_item ? target_item.TARGET_VAULE : 0;
                            var inputvaule = input_item ? input_item.INPUT_QTY : 0;
                            if (type === 0 || inputvaule > targetvaule) { return '#07C160'; }
                            else { return 'rgba(0,0,0,0)'; }
                        }
                    }
                };
                type = 1 - type;
                myChart.setOption(option, false);
                //clearInterval(sparkletimer);
                myChart.off('click');
                if (myChart.getZr() != null ) {
                    myChart.getZr().on('click', (params) => {
                        var pointInPixel = [params.offsetX, params.offsetY];
                        var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
                        if (myChart.containPixel('grid', pointInPixel)) {
                            var chart_x = myChart.getOption().xAxis[0].data[pointInGrid[0]];
                            OperatorHourOutputChart(chart_x);
                        }
                    });
                }
            }
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        var OperatorHourOutputChart = function (operator) {
            var houroutputdata = ToDayOperatorOutput.Table1;
            var data = houroutputdata.filter(function (item) {
                return item.OPERATOR_ID === operator;
            });
            if (data.length > 0) {
                var charthtml = `<div id="operatorhouroutput" class="devicedetailt modal-content"></div>`;
                $("#Tab3").append(charthtml);
                $("#operatorhouroutput").css("display", "block");
                var chart = echarts.init(document.getElementById('operatorhouroutput')).dispose();
            }
            else {
                $("#operatorhouroutput").css("display", "none");
                showMessage(`${equipment_name}没有生产数据!`);
            }
            var xAxisData = data.map(function (item) {
                return item.HOUR;
            });
            var FAIL = data.map(function (item) {
                return item.FAIL_QTY;
            });
            var output = data.map(function (item) {
                return item.OUTPUT_QTY;
            });
            var yield = data.map(function (item) {
                return item.YIELD;
            });
            var target = data.map(function (item) {
                return item.TARGET_VAULE;
            });
            var outputvaule = output.filter((value) => value !== null).map(Number);
            var targetvuale = target.filter((value) => value !== null).map(Number);
            var combinedArray = outputvaule.concat(targetvuale);
            var vaulemax = combinedArray.reduce(function (a, b) {
                return Math.max(a, b);
            });
            var myChart = echarts.init(document.getElementById('operatorhouroutput'));
            var options = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                title: {
                    text: operator,
                    textStyle: {
                        fontSize: '0.14rem',
                        textAlign: 'center'
                    }
                },
                textStyle: {
                    fontSize: '0.1rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.12rem',
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['OUTPUT_QTY', 'FAIL_QTY', 'YIELD','TARGET'],
                    width: '100%',
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: '0.12rem'
                    }
                },
                grid: {
                    top: '25%',
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:
                {
                    yAxisIndex: 9,
                    type: 'category',
                    data: xAxisData,
                    textStyle: {
                        fontSize: '0.12rem'
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: Math.ceil(vaulemax),
                        interval: Math.ceil(vaulemax / 6),
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        data: FAIL.map(item => parseInt(item) > 0 ? item : null),
                        name: 'FAIL_QTY',
                        type: 'bar',
                        stack: 'stack1',
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        data: output.map(item => parseInt(item) > 0 ? item : null),
                        name: 'OUTPUT_QTY',
                        type: 'bar',
                        stack: 'stack1',
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        data: yield.map(item => parseInt(item) > 0 ? item : 0),
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217', label: { show: false } } }
                    },
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        data: target.map(item => parseInt(item) > 0 ? item : 0),
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC', label: { show: false } } }
                    }
                ]
            };
            myChart.setOption(options);
            window.addEventListener('resize', function () {
                myChart.resize();
            });

        }
        /*ME机台测试项-散点图*/
        var GetToDayMeMachine = function (id) {
            if (!InCheck()) {
                return;
            }
            if (memachinetype == null || memachinetype == "" || memachinetype == "undefined") {
                return;
            }
            var line_item = TestItemKey[memachinetype][0].LINE_ITEM;
            var column_item = TestItemKey[memachinetype][0].COLUMN_ITEM;
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val(),GRADE: TestItemKey[memachinetype][0].LINE_ITEM };
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                //header_key: line_item,
                header_key: JSON.stringify(whe),
                header_vaule: column_item,
                type: 'DAY'
            };
            $.ajax({
                type: "POST",
                //url: "http://localhost:44304/Dashboard/GetMeMachine",
                url: api + "/Dashboard/GetMeMachine",
                data: pam,
                async: asyncType,
                dataType: "json",
                success: function (data) {
                    memachinetype = null;
                    ToDayMeMachineChart(data,id);
                }
            });
        }

        var ToDayMeMachineChart = function (dt,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            var data = dt.ReturnData;
            // 定义 x 轴和 y 轴的数据
            var xData = data.map(function (item) {
                return item.TEST_TIME;
            });
            var xDatat = Array.from(new Set(data.map(function (item) {
                return item.HOUR;
            })));
            var yData = data.map(function (item) {
                return item.HEADER_VALUE;
            });
            // 配置散点图的选项
            var option = {
                title: { show: false },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        if (params.length > 0) {
                            const date = new Date(params[0].data[0]);
                            var content = `${date.toLocaleString()}<br><br>`;
                            params.sort(function (a, b) {
                                return a.data[2].localeCompare(b.data[2]);
                            });
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].data[2] == null && params[i].data[1] == null) {
                                    content = "";
                                } else {
                                    content += `${params[i].data[2]}:\t${params[i].data[1]}<br>`;
                                }
                            }
                            return content;
                        }
                    },
                    extraCssText: 'white-space: pre-wrap; text-indent: 1em; font-family: Arial, sans-serif;',
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '8%',
                    left: '5%',
                    bottom: '20%',
                    width: '95%',
                },
                xAxis: [
                    {
                        type: 'time',
                        data: xData,
                        show: false,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            fontSize: '0.16rem',
                            formatter: function (value) {
                                var date = new Date(value);
                                var hours = date.getHours();
                                return hours + ":00";
                            }
                        }
                    },
                    {
                        type: 'category',
                        data: xDatat,
                        show: true,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 45,
                            color: '#fff',
                            fontSize: '0.16rem'
                        },
                        position: "bottom",
                        offset: 20
                    }
                ],
                yAxis: {
                    type: 'value',
                    //splitLine: { show: false },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    }
                },
                series: [{
                    type: 'scatter',
                    symbolSize: 8,
                    data: data.map(function (item) {
                        return [item.TEST_TIME, item.HEADER_VALUE, item.HEADER_KEY];
                    }),
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#03C2EC',
                        color: 'transparent'
                    }
                }]
            };
            myChart.setOption(option);
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        /*当天设备运行状态*/
        var GetToDayEquipmentStatus = function (id) {
            var pam =  {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'DAY'
            };
            $.ajax({
                type: "POST",
                //url: "http://localhost:44304/Dashboard/GetEmsStatus",
                url: api + "/Dashboard/GetEmsStatus",
                data: pam,
                dataType: "json",
                success: function (data) {
                    //ToDayEquipmentStatusChart(data,id);
                }
            });
        }

        var ToDayEquipmentStatusChart = function (dt,id) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            var data = dt.ReturnData;
            // 定义 x 轴和 y 轴的数据
            var xData = data.map(function (item) {
                return item.TEST_TIME;
            });
            var yData = data.map(function (item) {
                return item.HEADER_VALUE;
            });
            // 配置散点图的选项
            var option = {
                title: { show: false },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.13rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: 10
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '8%',
                    left: '4%',
                    bottom: '10%',
                    width: '94%'
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    show: false,
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'scatter',
                    data: data.map(function (item) {
                        return [item.TEST_TIME,item.HEADER_VALUE];
                    })
                }]
            };
            myChart.setOption(option);
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
        };

        /*工序设备当前状态*/
        var ProcessEquipmentDt;
        var GetProcessEquipment = function (id) {
            if (!InCheck()) {
                return;
            }
            if ($("#cmb_classtype").val() != "OTD") {
                $('.soe').removeClass('active');
                $('.timerate').addClass('active');
                GetDataUtilizationRate();
                return;
            }
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val()
            };
            $.ajax({
                type: "POST",
                url: api + "/Dashboard/GetProcessEquipment",
                data: pam,
                async: true,
                dataType: "json",
                success: function (data) {
                    if (data.Success && data.ReturnData.length > 0) {
                        ProcessEquipmentDt = data.ReturnData;
                        $("#"+id+"").empty();
                        var deviceHTML = ``;
                        for (var i = 0; i < ProcessEquipmentDt.length; i++) {
                            //EQUIPMENT_NAME、EQUIPMENT_ID、StatusCode、StatusDesc
                            var statuscssl;
                            switch (parseInt(ProcessEquipmentDt[i].StatusCode)) {
                                //1	故障停机、2闲置停用、3调试、4待生产、5正常运行
                                case 1:
                                    statuscssl = "breakdown";
                                    deviceHTML += `
                                    <div class="divfolt" onclick="GetEquipmentHourOput('${ProcessEquipmentDt[i].EQUIPMENT_NAME}','${ProcessEquipmentDt[i].EQUIPMENT_ID}','${ProcessEquipmentDt[i].COMPUTER_ID}')">
                                        <p class="devic breakdown" style="--ripple-color: rgba(172, 41, 37, 0.2);"></p>
                                        <p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p>
                                    </div>`;
                                    break;
                                case 2:
                                    statuscssl = "inidle";
                                    deviceHTML += `
                                    <div class="divfolt" onclick="GetEquipmentHourOput('${ProcessEquipmentDt[i].EQUIPMENT_NAME}','${ProcessEquipmentDt[i].EQUIPMENT_ID}','${ProcessEquipmentDt[i].COMPUTER_ID}')">
                                        <p class="devic inidle" style="--ripple-color: rgba(246, 139, 167, 0.2);"></p>
                                        <p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p>
                                    </div>`;
                                    break;
                                case 3:
                                    statuscssl = "debug";
                                    deviceHTML += `
                                    <div class="divfolt" onclick="GetEquipmentHourOput('${ProcessEquipmentDt[i].EQUIPMENT_NAME}','${ProcessEquipmentDt[i].EQUIPMENT_ID}','${ProcessEquipmentDt[i].COMPUTER_ID}')">
                                        <p class="devic debug" style="--ripple-color: rgba(213, 133, 18, 0.2);"></p>
                                        <p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p>
                                    </div>`;
                                    break;
                                case 4:
                                    statuscssl = "await";
                                    deviceHTML += `
                                    <div class="divfolt" onclick="GetEquipmentHourOput('${ProcessEquipmentDt[i].EQUIPMENT_NAME}','${ProcessEquipmentDt[i].EQUIPMENT_ID}','${ProcessEquipmentDt[i].COMPUTER_ID}')">
                                        <p class="devic await" style="--ripple-color: rgba(38, 154, 188, 0.2);"></p>
                                        <p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p>
                                    </div>`;
                                    break;
                                case 5:
                                    statuscssl = "normal";
                                    deviceHTML += `
                                    <div class="divfolt" onclick="GetEquipmentHourOput('${ProcessEquipmentDt[i].EQUIPMENT_NAME}','${ProcessEquipmentDt[i].EQUIPMENT_ID}','${ProcessEquipmentDt[i].COMPUTER_ID}')">
                                        <p class="devic normal" style="--ripple-color: rgba(57, 132, 57, 0.2);"></p>
                                        <p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p>
                                    </div>`;
                                    break;
                            }
                            /*deviceHTML += `<div class="divfolt"><p class="devic ${statuscssl}"></p><p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p></div>`;*/
                        }
                        var TabContentHTML = `
                        <div class="legend">
                            <span class="normal"><label>正在运行</label></span>
                            <span class="await"><label>待生产</label></span>
                            <span class="inidle"><label>闲置停用</label></span>
                            <span class="debug"><label>调试</label></span>
                            <span class="breakdown"><label>停机</label></span>
                        </div>
                        <div id="devicecontent">${deviceHTML}</div>`;
                        $("#" + id + "").html(TabContentHTML);
                        if (ProcessEquipmentDt.length > 56) {
                            $("#devicecontent").css('overflow', 'auto').css('height','calc(100% - 0.7rem)');
                        }
                        else {
                            $("#devicecontent").css('overflow', 'hidden').css('height', 'calc(100% - 0.3rem)');
                        }
                    }
                }
            });
        }

        $('#Tab2').mouseleave(function () {
            $("#equipmenthouroput").css("display", "none");
        })
        $('#Tab3').mouseleave(function () {
            $("#operatorhouroutput").css("display", "none");
        })

        /* 设备小时产出*/
        var GetEquipmentHourOput = function (equipment_name, equipment_id, computer_id) {
            var equipment = { EQUIPMENT_NAME: equipment_name, EQUIPMENT_ID: equipment_id, COMPUTER_ID: computer_id, CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val()};
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                type: 'DAY',
                header_key: JSON.stringify(equipment)
            };
            $.ajax({
                type: "POST",
                url: api + "/Dashboard/GetEquipmentHourOput",
                data: pam,
                dataType: "json",
                success: function (data) {
                    if (data.ReturnData.length > 0) {
                        var charthtml = `<div id="equipmenthouroput" class="devicedetailt modal-content"></div>`;
                        $("#Tab2").append(charthtml);
                        $("#equipmenthouroput").css("display", "block");
                        var chart = echarts.init(document.getElementById('equipmenthouroput')).dispose();
                        EquipmentHourOputChart(data.ReturnData);
                    } else {
                        $("#equipmenthouroput").css("display", "none");
                        showMessage(`${equipment_name}没有生产数据!`);
                    }
                }
            });
        }

        var EquipmentHourOputChart = function (data) {
            var xAxisData = data.map(function (item) {
                return item.HOUR;
            });
            var yAxisData1 = data.map(function (item) {
                return item.FAIL_QTY;
            });
            var yAxisData2 = data.map(function (item) {
                return item.OUTPUT_QTY;
            });
            var yieldrate = data.map(function (item) {
                return item.YIELD_RATE;
            });
            var vaulemax = Math.max.apply(yAxisData1, yAxisData2);
            var myChart = echarts.init(document.getElementById('equipmenthouroput'));
            var options = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                title: {
                    text: data[0].TESTER,
                    textStyle: {
                        fontSize: '0.14rem',
                        textAlign: 'center'
                    }
                },
                textStyle: {
                    fontSize: '0.1rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.12rem',
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['OUTPUT_QTY', 'FAIL_QTY','YIELD'],
                    width: '100%',
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: '0.12rem'
                    }
                },
                grid: {
                    top: '25%',
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:
                {
                    yAxisIndex: 9,
                    type: 'category',
                    data: xAxisData,
                    textStyle: {
                        fontSize: '0.12rem'
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: Math.ceil(vaulemax),
                        interval: Math.ceil(vaulemax / 6),
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        data: yAxisData1.map(item => parseInt(item) > 0 ? item : null),
                        name: 'FAIL_QTY',
                        type: 'bar',
                        stack: 'stack1',
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        data: yAxisData2.map(item => parseInt(item) > 0 ? item : null),
                        name: 'OUTPUT_QTY',
                        type: 'bar',
                        stack: 'stack1',
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        data: yieldrate.map(item => parseInt(item) > 0 ? item : 0),
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217', label: { show: false } } }
                    }
                ]
            };
            myChart.setOption(options);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        /*设备利用率data*/
        var UtilizationRateDta;
        var ratedt;
        var GetUtilizationRate = function (id) {
            if (!InCheck()) {
                return;
            }
            var whe = { CL_TYPE: $("#cmb_classtype").val(), PROD_TYPE: $("#cmb_prod_type").val()};
            var pam = {
                proj_code: $("#cmb_proj_code").val(),
                product_code: $("#cmb_product_code").val(),
                process_id: $("#cmb_process_code").val(),
                header_key: JSON.stringify(whe)
            };
            $.ajax({
                type: "POST",
                url: api + "/Dashboard/GetDataUtilizationRate",
                data: pam,
                dataType: "json",
                success: function (data) {
                    if (Object.values(data.ReturnData).length > 0) {
                        var legendHTML = `
                        <div class="legend">
                            <span class="normal"><label>运行</label></span>
                            <span class="await"><label>休息</label></span>
                            <span class="unproduced"><label>未产出</label></span>
                        </div>
                        <div id="devicecontent"></div>`;
                        $("#" + id + "").html(legendHTML);
                        UtilizationRateDta = data.ReturnData;
                        ratedt = data.ReturnData.Table2;
                        var chart = echarts.init(document.getElementById("devicecontent"));
                        chart.dispose();
                        TodayDeviceStatus("devicecontent", data.ReturnData.Table);
                    }
                }
            });
        }
        /*设备利用率*/
        var TodayDeviceStatus = function (id, data) {
            var chart = document.getElementById(id);
            var myChart = echarts.init(chart);
            var types = [
                { name: '运行', color: '#07C160' },
                { name: '休息', color: '#269ABC' },
                { name: '未产出', color: '#D58512' }
            ];
            var startTime;
            var datatemp = [];
            for (let i = 0; i < data.length; i++) {
                startTime = new Date(data[i].START_TIME).getTime();
                var typeItem = types.find(a => a.name === data[i].STATUSDESC);
                if (typeItem) {
                    datatemp.push({
                        name: typeItem.name,
                        value: [
                            parseInt(data[i].GROUPID),
                            new Date(data[i].START_TIME).getTime(),
                            new Date(data[i].TEST_TIME).getTime(),
                            data[i].DIFF_MILLISEC,
                            data[i].TESTER,
                            data[i].SN,
                        ],
                        barCategoryGap: '50%',
                        /*barGap: '2%', */
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: typeItem.color
                            }
                        }
                    });
                }
            }
            var categories1 = data.map(item => item.TESTER).filter((name, index, arr) => arr.indexOf(name) === index);
            var categories2 = categories1.map(name => {
                const foundItem = ratedt.find(item => item.TESTER === name);
                const result = foundItem ? foundItem.TIME_RATE.toFixed(2) + "%" : "";
                return result;

            });
            function renderItem(params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                const style = api.style();
                var rectShape = echarts.graphic.clipRectByRect(
                    {
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    },
                    {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    }
                );
                return (
                    rectShape && {
                        type: 'rect',
                        transition: ['shape'],
                        shape: rectShape,
                        style: style
                    }
                );
            }
            option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                grid: {
                    top: '0.5%',
                    left: '2%',
                    right: '2%',
                    bottom: '10%',
                    width: '96%',
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    fontSize: '0.13rem',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    },
                    formatter: function (params) {
                        return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    },
                    {
                        type: "slider",
                        show: true,
                        height: "1.5%",
                        bottom: "4.5%",
                        labelFormatter: '',
                        backgroundColor: "white",
                        brushSelect: false,
                        minValueSpan: 3600 * 24 * 1000 * 7,
                        handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
                        handleSize: "10vw",
                        handleColor: 'white',
                        start: 0,
                        end: 100,
                        handleStyle: {
                            borderCap: 'round',
                            color: "#fff",
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 1
                        },
                        color: "transparent",
                        borderColor: 'transparent',
                        backgroundColor: 'rgba(0, 128, 204,0.3)',
                        dataBackground: {
                            lineStyle: {
                                width: 0
                            },
                            areaStyle: {
                                color: 'transparent'
                            }
                        },
                        fillerColor: '#0080CC'
                    }
                ],
                xAxis: {
                    type: 'time',
                    //min: new Date(startTime).setHours(7, 0, 0, 0),
                    //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                    interval: 3600000,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            var date = new Date(val);
                            var options = { hour: '2-digit', minute: '2-digit', hour12: false };
                            var formattedTime = new Intl.DateTimeFormat('en-US', options).format(date);
                            return formattedTime;
                            //return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            fontSize: '0.14rem'
                        }
                    },
                    axisLabel: {
                        show: true,
                        color: '#fff',
                        fontSize: '0.14rem'
                    }
                },
                yAxis: [
                    {
                        yAxisIndex: 0,
                        data: categories1,
                        scale: true,
                        splitLine: { show: false },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            color: '#fff',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder'
                        }
                    },
                    {
                        yAxisIndex: 1,
                        type: 'category',
                        data: categories2,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            color: function (value, index) {
                                return parseInt(value.replace(/%/, '')) < 80 ? 'red' : '#fff';
                            },
                            fontSize: '0.12rem',
                            fontWeight: 'bolder'
                        }
                    }
                ],
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
            };
            myChart.setOption(option);
            tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });
            myChart.on('click', function (params) {
                GetEquipmentHourOput(params.data.value[4], params.data.value[5], params.data.value[5]);
            });
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    </script>
</body>
</html>

